import React from 'react';
import { Card, List, Button, Typography, Tag, Avatar } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { OrderStatus, OrderStatusText } from '../types/order';

const { Text } = Typography;

interface Order {
  id: string;
  date: string;
  total?: number;
  totalAmount?: number;
  status: OrderStatus;
  items: {
    name: string;
    price: number;
    quantity: number;
    image: string;
  }[];
}

// 订单状态颜色映射
const statusColorMap = {
  [OrderStatus.PENDING]: 'warning',
  [OrderStatus.PAID]: 'processing',
  [OrderStatus.SHIPPED]: 'success',
  [OrderStatus.COMPLETED]: 'success',
  [OrderStatus.CANCELLED]: 'error'
};

interface OrderListPageProps {
  isMobile: boolean;
  orders: Order[];
  onBack: () => void;
  onViewOrder: (orderId: string) => void;
}

export default function OrderListPage({ isMobile, orders, onBack, onViewOrder }: OrderListPageProps) {
  return (
    <div style={{ padding: isMobile ? '12px' : '16px' }}>
      <Card
        title="我的订单"
        extra={
          <Button 
            type="text" 
            icon={<ArrowLeftOutlined />} 
            onClick={onBack}
          >
            返回
          </Button>
        }
        bodyStyle={{ padding: 0 }}
      >
        <List
          dataSource={orders}
          renderItem={(order) => (
            <List.Item
              key={order.id}
              onClick={() => onViewOrder(order.id)}
              style={{ 
                padding: isMobile ? '12px 16px' : '16px 24px',
                cursor: 'pointer',
                borderBottom: '1px solid #f0f0f0'
              }}
            >
              <List.Item.Meta
                title={
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Text strong>订单号：{order.id}</Text>
                    <Tag color={statusColorMap[order.status] || 'default'}>
                      {OrderStatusText[order.status]}
                    </Tag>
                  </div>
                }
                description={
                  <div style={{ marginTop: 8 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                      <Text type="secondary">{order.date}</Text>
                      <Text strong>¥{(order.total || order.totalAmount || 0).toFixed(2)}</Text>
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
                      {order.items.map((item, index) => (
                        <div key={index} style={{ display: 'flex', alignItems: 'center' }}>
                          <Avatar 
                            src={item.image} 
                            size={24} 
                            style={{ marginRight: 8 }}
                          />
                          <Text type="secondary">{item.name} x {item.quantity}</Text>
                        </div>
                      ))}
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
}